<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>j1008_2</title>
<style>
.r {
	background: black;
	color: white;
}
</style>
<script src="js/jquery-2.1.1.js"></script>

<script src="js/jquery-2.1.1.min.js"></script>
<script>
	$(document).ready(function() {

		$('textarea#msg').keyup(function() {
			// 입력가능 총 글자수
			var maxLength = $('span#maxLen').text();

			// 입력한 글자수
			var inputLength = $(this).val().length;

			// 남은 글자수= 입력가능 총 글자수 - 입력한 글자수
			var remainLength = maxLength - inputLength;

			// 남을 글자수 출력
			$('span#remainLen').text(remainLength);

			if (remainLength < 0) {
				$('span#remainLen').css('color', 'red');
			} else {
				$('span#remainLen').css('color', 'black');
			}

		});

	});
	// end of $(do)
</script>
</head>

<body>
	<h1>키보드 관련이벤트</h1>
	<p>
		keydown() : 키보드가 눌려질 때 발생 <br /> keypress() : 글자가 입력될 때 발생 <br />
		keyup() : 키보드에서 때어질 때 발생
	</p>
	<hr />
	<div>
		<div>
			*입력가능 글자수 : <span id="maxLen">20</span>
		</div>
		<div>
			*남은글자 글자수 : <span id="remainLen">20</span>
		</div>
		<form>
			<!-- 임의 가로세로 크기인 textarea name, id는 msg -->
			<textarea name="msg" id="msg" cols="70" rows="5"></textarea>
		</form>
	</div>

</body>
</html>
